import React from 'react';
import { Link } from 'react-router';
import { Breadcrumb, Button, Form, Input, Table, Row, Col, Pagination,Message,Popover } from 'antd';

const FormItem = Form.Item;


let List = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    getInitialState() {
        return {
            data: [],
            costList: [],
            pagination: {
                current: 1,
                pageSize: 10
            },
          costName: '',
        }
    },
    componentDidMount() {
        this.handleSearch();
    },


    handleSearch() {
        this.setState({
          pagination: {
            current: 1
          }
        })
        this.fetch();
    },
    handleReset() {
      this.props.form.resetFields();
    },
     fetch() {
     let page = this.state.pagination.current;
     let forms = this.props.form.getFieldsValue();
     let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
     let _me = this
     Utils.sendAjax({
     url: '/statistic/room',
     data: JSON.stringify(params),
     callback: function (result) {
     if (result.code == '200') {
     _me.setState({
     data: result.data,
     pagination: result.page
     })
     }
     }
     })
     },

    rowKey(data) {
        console.log(data);
        return data.id;
    },

    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager
        });
        this.fetch();
    },
    getCostList() {
      let page = this.state.current ? this.state.current : 1;
      let forms = this.props.form.getFieldsValue();
      let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
        Utils.sendAjax({
            url: '/room/cost/list',
           data: JSON.stringify(params),
            callback: (result) => {
                if(result.code === '200') {
                    this.setState({
                        costList: result.data,
                    })
                }else {
                    Message.error(result.message, 10)
                }
            }
        })
    },

    render () {
        const { getFieldProps } = this.props.form;
        const columns = [{
            title: '房屋地址',
            dataIndex: 'address',
        }, {
            title: '房间名称',
            dataIndex: 'roomName',
        }, {
            title: '房屋面积',
            dataIndex: 'area',
        }, {
            title: '成本',
            dataIndex: 'costAmount',
        }, {
            title: '房源设施',
            // dataIndex: 'facilityList',
            render: (text,record) =>{
                let content;
                let facilityList;
                facilityList=record.facilityList.map((item) => {
                    return (

                              <Col sm={12}>
                                <FormItem  label={`${item.facilityName}`} className="facilityList">
                                  <span>{`${item.count}`}</span>
                                </FormItem>
                              </Col>

                    );
                });
               content= (
                 <div>
                   <Form inline>
                      <div  className="form-group" className="form-list" style={{maxWidth:300}}>
                        <Row gutter={24}>
                          {facilityList}
                        </Row>
                      </div>
                   </Form>
                 </div>
               );
                return (
                  <Popover placement="right" content={content} title="房源设施详情" trigger="click">
                      <a>查看详情</a>
                  </Popover>
                )
            }
        },

        {
            title: '收费项',
            render: (text,record) => {
                let content;
                let costBox;
                costBox = record.costList.map((item) => {
                    return (
                          <Col sm={12}>
                            <FormItem>
                              <span>{`${item.costName}`}</span>
                              </FormItem>
                          </Col>
                      
                    );
                });
                content = (
                  <div>
                    <Form inline>
                      <div  className="form-group" className="form-list" style={{maxWidth:300}}>
                        <Row gutter={24}>
                          {costBox}
                        </Row>
                      </div>
                    </Form>
                  </div>
                );
                return (
                  <Popover placement="right" content={content} title="收费项详情" trigger="click">
                      <a>收费项</a>
                  </Popover>
                )
            }}
      ];
        return (

            <div>

                <div className="search-bar">
                    <Form inline>
                        <FormItem label="关键字">
                            <Input {...getFieldProps('roomName') } placeholder="房间名"/>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
                            <Button type="default" onClick={this.handleReset}>重置</Button>
                        </FormItem>
                    </Form>
                </div>

             <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
                 onChange={this.handleTableChange}
                 pagination={this.state.pagination}/>
            </div>


        );
    }
});

List = Form.create()(List);
export default List